import Nerv from "nervjs";
import Taro from "@tarojs/taro-h5";
import { View, Swiper, SwiperItem } from '@tarojs/components';
import useBasePage from '../basePage/useBasePage';
import { redirectToPage, goToErrorPage } from '../../utils/index';
import { observer } from "@tarojs/mobx-h5";
import { GetTestData, GetPostData } from '../../api/home';
import { AtModal, AtButton } from 'taro-ui';

class Home extends Taro.Component {
  render() {
    const { params } = Taro.useRouter();
    const { onload, awtRs } = useBasePage();
    const [pageTitle, setPageTitle] = Taro.useState('首页');
    const [locationShow, setLocationShow] = Taro.useState(false);
    Taro.useEffect(() => {
      onload(async () => {
        console.log('参数：', params);
        await setPageTitle('我的小店');
      }, pageTitle);
    }, []);
    // 获取get测试数据
    const getTestData = async () => {
      let res = await awtRs(GetTestData());
      console.log('get测试：', res);
    };
    // 获取post测试数据
    const getPostData = async () => {
      let params = {
        page: '1',
        count: '5'
      };
      let res = await awtRs(GetPostData(params));
      console.log('post测试：', res);
    };
    const renderMenu = () => {
      return <AtButton type="secondary" onClick={() => redirectToPage('/pages/member/index')}>去会员中心</AtButton>;
    };
    const handleModal = () => {
      setLocationShow(!locationShow);
    };
    return <View className="page">
      <View>这里是{pageTitle}</View>
      {renderMenu()}
      <AtButton type="primary" onClick={getTestData}>点我发送get请求</AtButton>
      <AtButton type="secondary" onClick={getPostData}>点我发送post请求</AtButton>
      <AtButton type="primary" onClick={() => goToErrorPage(404, '没有找到资源')}>模拟错误操作</AtButton>
      <AtButton type="secondary" onClick={handleModal}>获取定位</AtButton>
      <AtModal isOpened={locationShow} title="获取位置" cancelText="取消" confirmText="确认" onCancel={handleModal} onConfirm={handleModal} content="你的位置信息将用于购物地址使用" />
      <Swiper className="test-h" indicatorColor="#999" indicatorActiveColor="#333" circular indicatorDots autoplay>
        <SwiperItem>
          <View className="demo-text-1" style={{ background: 'url(https://img10.360buyimg.com/babel/s700x360_jfs/t25855/203/725883724/96703/5a598a0f/5b7a22e1Nfd6ba344.jpg!q90!cc_350x180)', height: '100%', backgroundSize: '100%' }}></View>
        </SwiperItem>
        <SwiperItem>
          <View className="demo-text-2" style={{ background: 'url(https://img11.360buyimg.com/babel/s700x360_jfs/t1/4776/39/2280/143162/5b9642a5E83bcda10/d93064343eb12276.jpg!q90!cc_350x180)', height: '100%', backgroundSize: '100%' }}></View>
        </SwiperItem>
        <SwiperItem>
          <View className="demo-text-3" style={{ background: 'url(https://img14.360buyimg.com/babel/s700x360_jfs/t1/4099/12/2578/101668/5b971b4bE65ae279d/89dd1764797acfd9.jpg!q90!cc_350x180)', height: '100%', backgroundSize: '100%' }}></View>
        </SwiperItem>
      </Swiper>
    </View>;
  }

  componentDidMount() {
    super.componentDidMount && super.componentDidMount();
  }

  componentDidShow() {
    super.componentDidShow && super.componentDidShow();
  }

  componentDidHide() {
    super.componentDidHide && super.componentDidHide();
  }

}

export default observer(Home);